<template>
    <div class="vcomputed">
        <h2>computed</h2>
        <div class="hr"></div>
        <el-tag
            effect="dark"
            >
            作用
        </el-tag>
        <p class="decr">
            对data中的数据，能计算，能监听。而且它本身就是可以计算的属性，可以直接拿来用。<br>
            计算方面：与methods比，最重要的能力是可以缓存。<br>
            也就是说，第一次调用了computed中的该方法时，该方法返回的结果会被缓存，<br>
            之后再需要通过该方法获取结果时，该方法不会被再次调用，而是直接从缓存中获取到结果，并渲染到dom中。<br>
            在监听数据方面：与watch相比，实现结果更简洁。<br>
            computed中的方法，默认只有getter。如果需要setter，也可以自行添加。<br>
        </p>
        <div class="hr"></div>
        <el-tag
            effect="dark"
            >
            Demo - 对比
        </el-tag>
        <p class="decr">
            通过下面的例子，来展示计算方面的使用对比<br>
            此时,打开控制台，可以看到getval只调用了一次。<br>
            而getvalMet()却被调用了两次。<br>
            <img src="../assets/image/compare-computed.png" alt="">
        </p>
        <p class="decr">
            <span>通过computed方法计算：</span><br>
            {{getval}}<br>
            {{getval}}<br>
            --------------------------<br>
            <span>通过methods方法计算：</span><br>
            {{getvalMet()}}<br>
            {{getvalMet()}}<br>
        </p>
        <div class="hr"></div>
        <el-tag
            effect="dark"
            >
            Demo - setter
        </el-tag>
        <p class="decr">
            只有当val被改变时，才会执行setter。<br>
            setter会收到一个参数，该参数就是val变化后的值。<br>
            直接修改val，如demo中通过点击按钮触发的this.val = '我被改变了！！！'; 这样并不会引起dom中渲染的val值。<br>
            因为dom中渲染出来的值，是由getter决定的，而getter只和val1、val2两个值有关。<br>
            所以，当直接修改val触发了setter后，需要在setter中修改val1或val2的值，才能通过getter来让dom中的值发生变化。
        </p>
        <p class="decr">
            <!-- 获取值，默认调用getter -->
            {{val}}<br>
            <el-button @click="changeVal">点击改变val</el-button>
        </p>
        <div class="hr"></div>
        <el-tag
            effect="dark"
            type="success"
            >
            <a :href="getHref" target="_blank">查看示例代码</a>
        </el-tag>
    </div>
</template>

<script>
import mixinPage from './mixin-page';

export default {
    name: 'Vcomputed',
    mixins: [mixinPage],
    data() {
        return {
            val1: 'hello',
            val2: 'world'
        }
    },
    methods: {
        getvalMet() {
            console.log('调用了methods中的方法')
            return this.val1 + ' ' + this.val2 + ' !';
        },
        changeVal() {
            this.val = '我被改变了！！！';
        }
    },
    computed: {
        // 简写方式，也是默认的方式，不带setter
        getval() {
            console.log('调用了computed中的方法')
            return this.val1 + ' ' + this.val2 + ' !';
        },
        // 需要的时候，也可以自行添加一个setter
        val: {
            // getter
            get() {
                console.log('get被调用了！');
                return this.val1 + ' ' + this.val2 + ' !';
            },

            // setter 当val被改变时执行setter
            set(newVal) {
                // newVal是被改变后的val
                console.log('set被调用了: ', newVal)
                // 分别修改val1和val2，改变dom中val的值
                this.val1 = 'ok, ';
                this.val2 = '666';
            }
        }
    }
}
</script>

<style lang="less" scoped>
@import '../assets/css/mixin-frame.less';
</style>